<template>
  <el-form
    :model="formModel"
    label-width="80"
    label-placement="left"
    label-align="right"
    :rules="formRules"
  >
    <el-form-item v-if="parent" label="上级部门">
      <el-input :value="parent.name" readonly />
    </el-form-item>
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="formModel.name" placeholder="部门名称" />
    </el-form-item>

    <div class="btn-groups">
      <el-space>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">提交</el-button>
      </el-space>
    </div>
  </el-form>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import type { FormRules } from 'element-plus';

  const props = defineProps({
    row: {
      type: Object,
      default: undefined
    },
    parent: {
      type: Object,
      default: undefined
    }
  });

  const emits = defineEmits(['cancel', 'confirm']);

  const cancel = () => emits('cancel');

  const confirm = () => {
    emits('confirm', formModel.value);
  };

  onMounted(() => {
    if (props.row) {
      formModel.value = props.row as any;
    }
  });

  const formModel = ref({
    name: undefined,
    id: undefined
  });

  const formRules = reactive<FormRules>({
    name: [{ required: true, message: '请输入部门名称' }]
  });
</script>

<style lang="less" scoped>
  .btn-groups {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
</style>
